<script setup>
	import { ref } from 'vue'
	import { listService } from '../../api/goods.js'
	import { onLoad } from '@dcloudio/uni-app'
	import { useUserStore } from '../../store/idnex.js'
	import waterMarker from "../../components/sdq-watermarker/waterMarker.vue"
	import { getWatermar } from '../../api/login.js'
	
	const watermarText = ref('')
	const isHide = ref(false)
	
	
	getWatermar().then(res => {
		if(!res.data.hide){
			watermarText.value = res.data.text
			isHide.value = true
		}
	})
	
	const userStore = useUserStore()
	
	// 轮播图数据
	const swiperData = ref([
		{
			src: 'https://web-mobin-test-study.oss-cn-shenzhen.aliyuncs.com/%E5%AE%9A%E4%BD%8D1722820243583.png'
		},
		{
			src: 'https://web-mobin-test-study.oss-cn-shenzhen.aliyuncs.com/test.jpg'
		}
	])
	
	// 商品列表数据
	const goodsList = ref('')
	onLoad(async () => {
		const res = await listService(userStore.user.id)
		goodsList.value = res.data
	})
	
	// 点击商品事件
	const handleClickToDetails = (id) => {
		uni.navigateTo({
			url:'/pages/home/details?id=' + id
		})
	}
	
	
	
	
</script>

<template>
	<view>
		<waterMarker v-if="isHide" col="4" row="8" :text="watermarText" opacity="0.1" color="black" rotate="-30deg"></waterMarker>
			
		<!-- 轮播图 -->
		<view class="index-swiper">
			<swiper autoplay circular :interval="3000" indicator-dots>
				<block v-for="(item, index) in swiperData" :key="index">
					<swiper-item>
						<image :src="`https://images.weserv.nl/?url=${item.src}`" mode="scaleToFill" show-menu-by-longpress></image>
					</swiper-item>
				</block>
			</swiper>
		</view>
		
		<!-- 卡片列表 -->
		<view class="card-list">
			
			<view @click="handleClickToDetails(item.id)" v-for="(item, index) in goodsList" :key="item.id" :data-index="item.id" class="card-item">
				<uni-card :title="item.goodName" :cover="`https://images.weserv.nl/?url=${item.images}`">
					<text class="uni-body uni-mt-5">{{ item.descSmall }}...</text>
					<view slot="actions" class="card-actions no-border">
						<view class="card-actions-item">
							<span class="card-actions-item-text">￥{{ item.price }}</span>
						</view>
						<view class="card-actions-item">
							<uni-icons type="cart-filled" size="30" color="#3b29ff"></uni-icons>
						</view>
					</view>
				</uni-card>
			</view>


		</view>
	</view>
</template>

<style scoped lang="scss">
	
	:deep(.uni-card__cover-image){
		width: 272rpx;
	}
	
	.money {
		color: red;
	}
	
	.card-list {
		width: 100%;
		display: flex;
		flex-wrap: wrap;
		.card-item {
			width: 50%;
			text {
				-webkit-line-clamp: 1;
				overflow: hidden;
				white-space: normal;
				text-overflow: ellipsis;
			}
		}
	}
	
	.index-swiper {
		padding: 22rpx 20rpx 0 20rpx;
		overflow: hidden;
	}
	.index-swiper swiper {
		height: 320rpx;
		overflow: hidden;
		border-radius: 10rpx;
	}
	.index-swiper image {
		width: 100%;
		height: 100%;
	}
	
		.card-actions {
		display: flex;
		flex-direction: row;
		justify-content: space-between;
		align-items: center;
		border-top: 1px #eee solid;
	}
	.card-actions-item {
		display: flex;
		flex-direction: row;
		align-items: center;
		span {
			font-size: 28rpx;
			color: red;
		}
	}
	.card-actions-item-text {
		font-size: 12px;
		color: #666;
		margin-left: 5px;
	}
	.cover-image {
		flex: 1;
		height: 150px;
	}
	.no-border {
		border-width: 0;
	}
	
</style>
